<template>
  <div class="center">
    <top></top>
    <div class="center1">
        <div class="center2">
            <el-tabs type="border-card">
                <el-tab-pane label="个人信息">
                    <div class="btns" style="width:300px;text-align:center">
                        <div class="img">
                            <img 
                                style="object-fit: cover;width: 300px; height: 300px;overflow: hidden;border-radius: 50%;"
                                :src="$store.state.HOST + user.avatar">
                            </img>
                        </div>
                        <div>
                            <el-upload
                            ref="upload"
                            :action="uploadAvatarUrl()+ '/'+ this.user.id"
                            :show-file-list="false"
                            :before-upload="beforeAvatorUpload"
                            :on-success="handleAvatorSuccess"
                            accept="image/*"
                            >
                            <el-button style="margin-top:15px" size="mini" icon="el-icon-picture-outline-round">修改头像</el-button>
                            </el-upload>
                        </div>
                    </div>
                    <div class="center01">
                        <div style="margin-top:10px">用户账号:</div>
                        <el-input style="width:500px;margin-top:10px" v-model="user.loginAccount" disabled placeholder="请输入用户账号"></el-input>
                    </div>
                    <div class="center01">
                        <div style="margin-top:10px">用户昵称:</div>
                        <el-input style="width:500px;margin-top:10px" v-model="user.userName" placeholder="请输入用户昵称"></el-input>
                    </div>
                    <div class="center01">
                        <div style="margin-top:10px">邮箱:</div>
                        <el-input style="width:500px;margin-top:10px" v-model="user.email" placeholder="请输入邮箱"></el-input>
                    </div>
                    <div class="center01">
                        <div style="margin-top:10px">联系方式:</div>
                        <el-input style="width:500px;margin-top:10px" v-model="user.tel" placeholder="请输入联系电话"></el-input>
                    </div>
                    <div class="center01" style="width:500px;margin-top:10px">
                        <div style="margin-top:10px">性别:</div>
                        <el-radio v-model="user.sex" label="0">男</el-radio>
                        <el-radio v-model="user.sex" label="1">女</el-radio>
                    </div>
                    <el-button type="primary" style="font-family:'黑体';margin-top:10px" @click="editUser">保存</el-button>
                </el-tab-pane>
                <el-tab-pane label="修改密码">
                    <div class="center01">
                        <div style="margin-top:10px">旧密码:</div>
                        <el-input type="password" style="width:500px;margin-top:10px" v-model="pass.oldPassword" placeholder="请输入旧密码"></el-input>
                    </div>
                    <div class="center01">
                        <div style="margin-top:10px">新密码:</div>
                        <el-input type="password" style="width:500px;margin-top:10px" v-model="pass.newPassword" placeholder="请输入新密码"></el-input>
                    </div>
                    <div class="center01">
                        <div style="margin-top:10px">确认密码:</div>
                        <el-input type="password" style="width:500px;margin-top:10px" v-model="pass.conPassword" placeholder="请输入确认密码"></el-input>
                    </div>
                    <el-button type="primary" style="font-family:'黑体';margin-top:10px" @click="changePassword">保存</el-button>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
  import {mixin} from "../../minix";
  import {getUser,editUser,changePassword} from '../../api/api'
  import top from '@/components/top'
  import bottom from '@/components/bottom'
  export default {
    mixins: [mixin],
    data() {
      return{
        radio: "",
        input: "",
        user: {
        },
        pass: {
            oldPassword: "",
            newPassword: "",
            conPassword: "",
        },
      }
    },
    components: {
        top,
        bottom,
    },
    methods: {
      handleAvatorSuccess(res){
        let _this = this;
        if(res.code == 1000){
            _this.$message({
              type: 'success',
              message: '上传成功!'
            });
            this.getUserInfo()
        }else{
          _this.$notify.error({
            title: '错误',
            message: res.message
          });
        }
      },
      getUserInfo() {
          getUser().then(res => {
              if(res.code == 1000) {
                  this.user = res.data
                  this.user.sex = this.user.sex + ""
                  window.localStorage.setItem("user_info",JSON.stringify(res.data))
              }
          })
      },
      editUser() {
          if (!this.user.userName) {
            this.$message({
                message: '请输入用户昵称',
                type: 'warning'
            });
            return
          }
          if (!this.user.email) {
            this.$message({
                message: '请输入邮箱',
                type: 'warning'
            });
            return
          }
          var regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; // 邮箱正则表达式
          if (!regex.test(this.user.email)) {
              this.$message({
                  message: '请输入正确的邮箱格式',
                  type: 'warning'
              });
              return;
          }
          if (!this.user.tel) {
            this.$message({
                message: '请输入联系方式',
                type: 'warning'
            });
            return
          }
          var param = {
              id: this.user.id,
              userName: this.user.userName,
              email: this.user.email,
              tel: this.user.tel,
              sex: this.user.sex
          }
          editUser(param).then(res => {
              if (res.code == 1000) {
                  this.$message({
                    message: '保存成功',
                    type: 'success'
                  });
                  this.getUserInfo()
              }
          })
      },
      changePassword() {
          if (!this.pass.oldPassword) {
              this.$message({
                  message: '请输入旧密码',
                  type: 'warning'
              });
              return
          }
          if (!this.pass.newPassword) {
              this.$message({
                  message: '请输入新密码',
                  type: 'warning'
              });
              return
          }
           if (!this.pass.conPassword) {
              this.$message({
                  message: '请输入确认密码',
                  type: 'warning'
              });
              return
          }
          if (this.pass.newPassword != this.pass.conPassword) {
              this.$message({
                  message: '确认密码错误',
                  type: 'warning'
              });
              return
          }
          var param = {
              id: this.user.id,
              password: this.pass.oldPassword,
              newPassword: this.pass.newPassword
          }
          changePassword(param).then(res => {
              this.$message({
                  message: '修改成功,请重新登录',
                  type: 'success'
              });
              this.pass.oldPassword = ""
              this.pass.newPassword = ""
              this.pass.conPassword = ""
              window.localStorage.removeItem("user_token")
              window.localStorage.removeItem("user_info")
              this.$message({
                message: '退出成功',
                type: 'success'
              });
              this.$router.push("/login")
          })
      },
    },
    created() {
     
    },
    mounted() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
      this.user = JSON.parse(window.localStorage.getItem("user_info"))
      this.user.sex = this.user.sex + ""
    }
 }
</script>

<style scoped>
@import url('../../assets/css/center.css');
.center01>>>.el-input__inner {
  -webkit-appearance: none;
  background-color: #EEF0F3;
  background-image: none;
  border-radius: 4px;
  border: 0;
  width: 100%;
  font-family: '黑体';
}
</style>